<template>
  <div class="app-container">
    <div style="background: #f7f8fa; padding: 20px">
      <el-form
        id="selectForm"
        :model="form"
        ref="form"
        v-show="showSearch"
        label-width="88px"
      >
        <!-- <div
          v-if="form.timeVoList"
          style="
            background: #fff;
            border-radius: 6px;
            margin-bottom:15px;
            padding:15px;
          "
        >
          <el-steps id="step" :active="form.timeVoList.length" align-center>
            <el-step
              process-status="success"
              v-for="(i, idx) in form.timeVoList"
              :key="idx"
              :title="i.statusName"
              :description="i.time"
            ></el-step>
          </el-steps>
        </div> -->
        <div style="font-size: 14px;color: #999;line-height: 24px;margin-bottom: 10px;">
          <p>温馨提示：  (打印机需自备)</p>
        	<p>第一步：打印前需安装云打印服务C-lodop,点击链接
        		<a href="http://images.tongkeer.com/K-Print_Setup_for_Win64NT_3.020Extend.rar" target="_blank" style="color:blue;">C-lodop</a>
        		下载安装并运行程序</p>
        	<p>第二步：在电脑右下方右键点击C-lodop->扩展功能->AO打印服务->复制Server IP</p>
        	<p>第三步：扩展功能->AO客户端桥->勾选本机启动客户端桥,粘贴复制的Server IP地址</p>
        	<p>第四步：进入打单界面->点击打单->在弹出的打印界面选择打印->选择连接的打印机名称和打印份数->完成打单</p>
        </div>


        <div
          v-if="form.itemList && form.itemList.length > 0"
          style="
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            border: 1px solid #eee;
          "
        >
          <div>
            <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
              商品明细
            </div>
            <orderItem :itemList="form.itemList"></orderItem>
          </div>
        </div>

        <div
          style="
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            border: 1px solid #eee;
          "
        >
          <div style="display: flex">
            <div style="width: 25%">
              <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
                订单信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="订单编号" width="400px">
                    <span class="itemSpan">{{ form.orderNo }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="供应商名称" width="400px" v-if="form.supplierName">
                    <span class="itemSpan">{{ form.supplierName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="订单金额" width="400px">
                    <span class="itemSpan">{{ form.orderAmountStr }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="配送方式" width="400px">
                    <span class="itemSpan">{{ form.deliverMethodName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="订单类型" width="400px">
                    <span class="itemSpan">{{ form.orderTypeName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="订单来源" width="400px">
                    <span class="itemSpan">{{ form.platSourceName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div
              style="
                background: #fff;
                border-radius: 6px;
                margin-bottom: 15px;
                width: 25%;
              "
            >
              <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
                支付信息
              </div>
              <el-row> </el-row>

              <el-row>
                <el-col>
                  <el-form-item label="支付方式" width="400px">
                    <span class="itemSpan">{{ form.payMethodName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="支付金额" width="400px">
                    <span class="itemSpan">{{ form.payAmountStr }}元</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="折扣金额" width="400px">
                    <span class="itemSpan">{{ form.discountAmountStr }}元</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col>
                  <el-form-item label="优惠金额" width="400px">
                    <span class="itemSpan"
                      >{{ form.useCouponAmountStr }}元</span
                    >
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="金币支付" width="400px">
                    <span class="itemSpan">{{ form.payByBalanceStr }}元</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="物流费用" width="400px">
                    <span class="itemSpan">{{ form.freightAmountStr }}元</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div
            v-if="form.customerAddressVo"
              style="
                background: #fff;
                border-radius: 6px;
                margin-bottom: 15px;
                width: 25%;
              "
            >
              <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
                收件人信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="收件人名称" width="400px">
                    <span class="itemSpan">{{ form.customerAddressVo.name }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="收件人号码" width="400px">
                    <span class="itemSpan">{{ form.customerAddressVo.mobile }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="收件人地址" width="400px">
                    <span class="itemSpan">{{ form.customerAddressVo.provinceName + form.customerAddressVo.cityName + form.customerAddressVo.countyName + form.customerAddressVo.address  }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="收件人邮编" width="400px">
                    <span class="itemSpan">{{ form.customerAddressVo.provinceCode }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div
              style="
                background: #fff;
                border-radius: 6px;
                margin-bottom: 15px;
                width: 25%;
              "
            >
              <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
                客户信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="客户名称" width="400px">
                    <span class="itemSpan">{{ form.customerName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="手机号码" width="400px">
                    <span class="itemSpan">{{ form.phone }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="客户留言" width="400px">
                    <span class="itemSpan">{{ form.buyMes }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </div>
        </div>

        <div
          v-if="form.deliverList && form.deliverList.length > 0"
          style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          "
        >
          <div>
            <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
              物流信息
            </div>
            <deliver :deliverList="form.deliverList"></deliver>
          </div>
        </div>

        <div
          v-if="form.customerInvoiceVo"
          style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          "
        >
          <div>
            <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
              发票抬头
            </div>

            <customerInvoice :customerInvoiceList="[form.customerInvoiceVo]"></customerInvoice>
          </div>
        </div>

        <div
          v-if="form.invoice"
          style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          "
        >
          <div>
            <div style="font-size: 16px;margin-bottom: 20px;" class="big_title_style">
              开票信息
            </div>

            <invoice :invoiceList="[form.invoice]"></invoice>
          </div>
        </div>

        <div
          style="
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            border: 1px solid #eee;
          "
        >
          <div>
            <div  style="display: flex; justify-content: space-between;margin-bottom: 15px;">
              <div style="font-size: 16px;" class="big_title_style">
                备注信息 
              </div>
              <el-button  size="small" @click="dialogVisible = true">添加备注</el-button>
              <!-- <el-button v-else size="small" style="position: absolute;right:0px;" @click="dialogVisible = true">修改备注</el-button> -->
            </div>

            <div v-if="form.remark">
              <span v-for="(item, index) in form.remark" style="color: #606266; font-size: 14px; line-height: 24px;" :key="index">
                {{item}} <br />
              </span>
            </div>

            <el-dialog
              title="备注"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <el-input type="textarea" placeholder="请输入内容" v-model="remarks"></el-input>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRemarks"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </div>
        </div>



        <!-- <div
          v-if="form.complaintList"
          style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          "
        >
          <div>
            <div
              style="
                font-size: 16px;
                margin-bottom: 20px;
                color: #606266;
                font-weight: bold;
              "
            >
              投诉信息
            </div>
            <complaint :complaintList="form.complaintList"></complaint>
          </div>
        </div> -->

      </el-form>
        <div slot="footer" class="dialog-footer" align="center" style="margin-top: 20px">
          <el-button type="primary" @click="printClick()">打单</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import { getInfo,addRemark,getTemplate } from "@/api/order/info";
import orderItem from "@/components/Order/orderItem";
import invoice from "@/components/Order/invoiceList";
import customerInvoice from "@/components/Order/customerInvoice";
import deliver from "@/components/Order/deliver";
import postSale from "@/components/Order/postSale";
import complaint from "@/components/Order/complaintList";
import {getLodop} from "@/utils/lodop";


export default {
  name: "order",
  props: ["info"],
  components: {
    orderItem,
    invoice,
    deliver,
    postSale,
    complaint,
  },
  data() {
    return {
      orderUid: "",
      remarks: null,
      dialogVisible: false,
      zIndex: 3000,
      showSearch: true,
      // 预览图片
      carouselImgs: [],
      detailImgs: [],
      // 表单参数
      form: {
        invoice: {},
        itemList: [],
        deliverList: [],
        postSaleList: [],
        complaintList: [],
      },
    };
  },
  created() {
    this.getInfoData();
  },
  methods: {
    getInfoData() {
      this.orderUid = this.$route.params.orderUid;
      console.log(this.orderUid);
      getInfo(this.orderUid).then((response) => {
        this.form = response.data;
        if(this.form.remark){
          this.form.remark = this.form.remark.replace("[\"","");
          this.form.remark = this.form.remark.replace("\"]","");
          this.form.remark = this.form.remark.replace("\",\"","");
          this.form.remark = this.form.remark.split(';')
        }
      });
    },
    //云打印
    printClick(){
      getTemplate(this.orderUid).then(response => {
        console.log(response.msg)
        var strHTML=response.msg;
        if(strHTML){
          // 引用C-Lodop打印服务器,发起打印请求
          var LODOP = getLodop();
          LODOP.ADD_PRINT_HTM(30,5,"100%","80%",strHTML);
          LODOP.PREVIEW();
        }
      });
    },
    addRemarks() {
      this.add = new Object
      this.add.orderUid = this.orderUid
      this.add.remark = JSON.parse(JSON.stringify(this.remarks));
      console.log(this.add);
      addRemark(this.add).then(response => {
        this.form.remark = response.data;
      });
      this.remarks = null;
      this.dialogVisible = false
    },
    cancel(){
      this.$router.go(-1);
    },
  },
};
</script>
sty
<style scoped>
#selectForm >>> .el-form-item__label {
  font-size: 14px;
}
#selectForm >>>.el-form-item {
  margin-bottom: 0px;
}

.itemSpan {
  font-size: 12px;
  color: #606266;
  font-weight: 100;
}
</style>
